// import Parent from "./views/Parent";
// import ListFor from "./views/for/listFor";
// import IfView from "./views/if/IfView.js";
// import ClickBind from "./views/clickBind/ClickBind";
// import TryUseState from "./views/tryUseState/TryUseState";
// import StyleClass from "./views/class/StyleClass";
// import Form from "./views/form/Form";
// import UseRef from "./views/useRef/UseRef";
// import Top from "./views/useContext/Top";
// import TryUseEffect from "./views/tryUseEffect/TryUseEffect";
// import Father from "./views/tryUseEffect/CleanEffect";
// import Custom from "./views/customHook/Custom";
import { useSelector, useDispatch } from "react-redux";

// 导入 actionCreater
import { increment, decrement, addToNum } from "./store/modules/counterStore";
import { fetchGetChannels } from "./store/modules/channelStore";
import { useEffect } from "react";

function App() {
  const { count } = useSelector((state) => state.counter);
  const { channelList } = useSelector((state) => state.channel);

  const dispatch = useDispatch();

  // 使用 useEffect 触发异步请求执行
  useEffect(() => {
    dispatch(fetchGetChannels());
    console.log("useEffect");
  }, [dispatch]);

  return (
    <>
      {/* <Parent /> */}
      {/* <ListFor /> */}
      {/* <IfView /> */}
      {/* <ClickBind /> */}
      {/* <TryUseState /> */}
      {/* <StyleClass /> */}
      {/* <Form /> */}
      {/* <UseRef /> */}
      {/* <Top /> */}
      {/* <TryUseEffect /> */}
      {/* <Father /> */}
      {/* <Custom /> */}
      <hr />
      <h1>Count: {count}</h1>
      <div>
        <button onClick={() => dispatch(decrement())}>-</button>
        <button onClick={() => dispatch(increment())}>+</button>
        <hr />
        <button onClick={() => dispatch(addToNum(5))}>+5</button>
        <button onClick={() => dispatch(addToNum(20))}>+20</button>
        <hr />
        <ul>
          {channelList.map((item) => (
            <li key={item.id}>{item.name}</li>
          ))}
        </ul>
      </div>
    </>
  );
}

export default App;
